<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title>Demo</title>
  </head>
  <style>
    * { margin: auto 0; padding: 0; }
    body { height: 100vh; }
    #control {
      position: fixed; top: 0; right: 0; width: 300px;
      padding: 10px; box-sizing: border-box;
      background: white; opacity: 0.3; color: #666;
    }
  </style>
  <body>
    <div id="control">
      <input type="range" min="-180" max="180" value="0" step="0.01" id="model-x">
      <label for="model-x">Rotate X</label>

      <input type="range" min="-180" max="180" value="0" step="0.01" id="model-y">
      <label for="model-y">Rotate Y</label>

      <input type="range" min="-180" max="180" value="0" step="0.01" id="model-z">
      <label for="model-z">Rotate Z</label>

      <input type="range" min="-1" max="1" value="0" step="0.01" id="dir-x">
      <label for="dir-x">Light X</label>

      <input type="range" min="-1" max="1" value="0" step="0.01" id="dir-y">
      <label for="dir-y">Light Y</label>

      <input type="range" min="-1" max="1" value="1" step="0.01" id="dir-z">
      <label for="dir-z">Light Z</label>

      <input type="range" min="0" max="1" value="0.5" step="0.01" id="dir-strength">
      <label for="dir-strength">Light Strength</label>

      <br/>
      <input type="color" value="#ffffff" id="dir-color">
      <label for="dir-color">Light Color</label>
      <br/>
    </div>
    <canvas></canvas>
    <script type="module" src="./basic-mesh.js"></script>
  </body>
</html>
